<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title> 表单构建器</title>
	<link rel="shortcut icon" href="favicon.ico"> <link href="../../css/bootstrap.min14ed.css?v=3.3.6" rel="stylesheet">
	<link href="../../css/font-awesome.min93e3.css?v=4.4.0" rel="stylesheet">
	<link href="../../css/animate.min.css" rel="stylesheet">
	<link href="../../css/bootstrap.min.css" rel="stylesheet">
	<link href="../../css/plugins/summernote/summernote.css" rel="stylesheet">
	<link href="../../css/plugins/summernote/summernote-bs3.css" rel="stylesheet">
	<link href="../../css/style.min862f.css" rel="stylesheet">
	<link href="../../ajax/libs/bootstrap-table/bootstrap-table.min.css" rel="stylesheet">
	<link href="../../css/animate.css" rel="stylesheet">
	<link href="../../css/plugins/dataTables/dataTables.bootstrap.css" rel="stylesheet">
	<link href="../../css/bootstrap-select.min.css" rel="stylesheet">
<style>
	.eleclass{
		background-color: #FFF;
		width: 100%;
		height: 100%;
		border: 1px solid #e5e6e7;
	}

</style>
</head>

<body class="gray-bg">
<div class="wrapper wrapper-content">
	<div class="row">
		<div class="col-sm">
			<div class="ibox float-e-margins">
				<div class="ibox-title">

						<button class="btn btn-primary" style="margin-top: -5px;float: right" data-clipboard-text="testing"  >生成模块</button>

				</div>

				<div  >
					<div class="layui-card-body">
						<legend class="code-legend">基本信息</legend>
						<div class="col-md-6">
							<div class="form-group">
								<label  style="padding-top:7px;"   class="col-sm-3 control-label">项目路径：</label>
								<div class="col-sm-9">
									<input type="text" name="projectPath" class="form-control" placeholder="请输入项目路径">
								</div>
							</div>
							<div class="form-group">
								<label style="padding-top:20px;"  class="col-sm-3 control-label">项目包名：</label>
								<div class="col-sm-9">
									<input type="text" name="projectName"   style="margin-top: 15px;" class="form-control" placeholder="请输入项目包名">
								</div>
							</div>
							<div class="form-group">
								<label style="padding-top:20px;"  class="col-sm-3 control-label">模块名称：</label>
								<div class="col-sm-9">
									<input type="text" name="modelName"   style="margin-top: 15px;" class="form-control" placeholder="请输入模块名称">
								</div>
							</div>
							<div class="form-group">
								<label style="padding-top:20px;"  class="col-sm-3 control-label">上级目录：</label>
								<div class="col-sm-9">
									<input id="treeId" name="parentId" type="hidden"  />
									<input type="text" name="modelName"   onclick="selectMenuTree()" id="treeName" readonly="true" style="margin-top: 15px;" class="form-control" placeholder="请选择上级目录">
								</div>
							</div>
						</div>
						<div class="col-md-6">
							<div class="form-group">
								<label  style="padding-top:7px;" class="col-sm-3 control-label">表名称：</label>
								<div class="col-sm-9">
									<input type="text" name="tableName" class="form-control" placeholder="请输入表名称">
								</div>
							</div>
							<div class="form-group">
								<label  style="padding-top:20px;" class="col-sm-3 control-label">实体类：</label>
								<div class="col-sm-9">
									<input type="text" name="entityName" style="margin-top: 15px;"  class="form-control" placeholder="请输入实体类名称">
								</div>
							</div>
							<div class="form-group">
								<label  style="padding-top:20px;" class="col-sm-3 control-label">作者：</label>
								<div class="col-sm-9">
									<input type="text" name="createName"   style="margin-top: 15px;"  class="form-control" placeholder="请输入作者">
								</div>
							</div>
							<div class="form-group">
								<label style="padding-top:20px;"  class="col-sm-3 control-label">表单模板：</label>
								<div class="col-sm-9">
									<div class="input-group" style="margin-top: 15px;"  >
										<input      type="text" class="form-control" id="demoCode">
										<div class="input-group-btn">
											<button type="button" class="btn btn-white dropdown-toggle" data-toggle="dropdown">
												<span class="caret"></span>
											</button>
											<ul class="dropdown-menu dropdown-menu-right" role="menu">
											</ul>
										</div>
										<!-- /btn-group -->
									</div>
								</div>
							</div>
						</div>

				</div>
				</div>
				<div  >
					<div class="layui-card-body">
						<legend class="code-legend">实体类信息</legend>

						<div class="row">
							<div class="col-sm-12">
								<div class="ibox float-e-margins">

									<div class="ibox-content">
										<div style="padding-top: 10px;">
											<a onclick="fnClickAddRow();" href="javascript:void(0);" class="btn btn-primary ">添加行</a>
											<a id="fnClickRemoreRow" href="javascript:void(0);" class="btn btn-danger">全部删除</a>
										</div>
										<table class="table table-striped table-bordered table-hover " id="editable">
											<thead>
											<tr>
												<th>字段名称</th>
												<th>字段标题</th>
												<th>数据类型</th>
												<th>是否查询（可选）</th>
												<th>列表展示（可选）</th>
												<th>校验规则（可选）</th>
												<th>操作</th>
											</tr>
											</thead>
											<tbody>
											<tr >
												<td class="teedit">id</td>
												<td class="teedit">UUID</td>
												<td  >
													<select  class="form-control" style="width: 100%;height: 100%;" >
														<option value="String" selected = "selected">String</option>
														<option value="Date">Date</option>
														<option value="Integer">Integer</option>
														<option value="Double">Double</option>
													</select> </td>
												<td  ><select  class="form-control" style="width: 100%;height: 100%;" >
													<option value="0">是</option>
													<option value="1" selected="selected">否</option>

												</select> </td>
												<td ><select  class="form-control" style="width: 100%;height: 100%;" >
													<option value="0">是</option>
													<option value="1" selected="selected">否</option>
												</select></td>
												<td >　
														<select  name ="selectpicker" class="selectpicker"  data-live-search="true"      multiple >
															<option value="0">必选</option>
															<option value="1">邮箱</option>
															<option value="2">数字</option>
															<option value="2">编号</option>
														</select>
												 </td>
												<td>
													 <a class="btn btn-success btn-xs" href="#" onclick="up()"><i class="fa fa-edit"></i>上移</a>
													<a class="btn btn-success btn-xs" href="#" onclick="down()"><i class="fa fa-edit"></i>下移</a>
												 <a class="btn btn-danger btn-xs" href="#" onclick="remove()"><i class="fa fa-remove"></i>删除</a>
												</td>
											</tr>
											<tr >
												<td class="teedit">create</td>
												<td class="teedit">创建人</td>
												<td  >
													<select  class="form-control" style="width: 100%;height: 100%;" >
														<option value="String" selected = "selected">String</option>
														<option value="Date">Date</option>
														<option value="Integer">Integer</option>
														<option value="Double">Double</option>
													</select> </td>
												<td  ><select  class="form-control" style="width: 100%;height: 100%;" >
													<option value="0">是</option>
													<option value="1" selected="selected">否</option>

												</select> </td>
												<td ><select  class="form-control" style="width: 100%;height: 100%;" >
													<option value="0">是</option>
													<option value="1" selected="selected">否</option>
												</select></td>
												<td >　
													<select  name ="selectpicker" class="selectpicker"  data-live-search="true"      multiple >
														<option value="0">必选</option>
														<option value="1">邮箱</option>
														<option value="2">数字</option>
														<option value="2">编号</option>
													</select>
												</td>
												<td>
													<a class="btn btn-success btn-xs" href="#" onclick="up()"><i class="fa fa-edit"></i>上移</a>
													<a class="btn btn-success btn-xs" href="#" onclick="down()"><i class="fa fa-edit"></i>下移</a>
													<a class="btn btn-danger btn-xs" href="#" onclick="remove()"><i class="fa fa-remove"></i>删除</a>
												</td>
											</tr>
											<tr >
												<td class="teedit">createTime</td>
												<td class="teedit">创建时间</td>
												<td  >
													<select  class="form-control" style="width: 100%;height: 100%;" >
														<option value="String">String</option>
														<option value="Date"  selected = "selected">Date</option>
														<option value="Integer">Integer</option>
														<option value="Double">Double</option>
													</select> </td>
												<td  ><select  class="form-control" style="width: 100%;height: 100%;" >
													<option value="0">是</option>
													<option value="1" selected="selected">否</option>

												</select> </td>
												<td ><select  class="form-control" style="width: 100%;height: 100%;" >
													<option value="0">是</option>
													<option value="1" selected="selected">否</option>
												</select></td>
												<td >　
													<select  name ="selectpicker" class="selectpicker"  data-live-search="true"      multiple >
														<option value="0">必选</option>
														<option value="1">邮箱</option>
														<option value="2">数字</option>
														<option value="2">编号</option>
													</select>
												</td>
												<td>
													<a class="btn btn-success btn-xs" href="#" onclick="up()"><i class="fa fa-edit"></i>上移</a>
													<a class="btn btn-success btn-xs" href="#" onclick="down()"><i class="fa fa-edit"></i>下移</a>
													<a class="btn btn-danger btn-xs" href="#" onclick="remove()"><i class="fa fa-remove"></i>删除</a>
												</td>
											</tr>
											<tr >
												<td class="teedit">updateUser</td>
												<td class="teedit">修改人</td>
												<td  >
													<select  class="form-control" style="width: 100%;height: 100%;" >
														<option value="String"  selected = "selected">String</option>
														<option value="Date" >Date</option>
														<option value="Integer">Integer</option>
														<option value="Double">Double</option>
													</select> </td>
												<td  ><select  class="form-control" style="width: 100%;height: 100%;" >
													<option value="0">是</option>
													<option value="1" selected="selected">否</option>

												</select> </td>
												<td ><select  class="form-control" style="width: 100%;height: 100%;" >
													<option value="0">是</option>
													<option value="1" selected="selected">否</option>
												</select></td>
												<td >　
													<select  name ="selectpicker" class="selectpicker"  data-live-search="true"      multiple >
														<option value="0">必选</option>
														<option value="1">邮箱</option>
														<option value="2">数字</option>
														<option value="2">编号</option>
													</select>
												</td>
												<td>
													<a class="btn btn-success btn-xs" href="#" onclick="up()"><i class="fa fa-edit"></i>上移</a>
													<a class="btn btn-success btn-xs" href="#" onclick="down()"><i class="fa fa-edit"></i>下移</a>
													<a class="btn btn-danger btn-xs" href="#" onclick="remove()"><i class="fa fa-remove"></i>删除</a>
												</td>
											</tr>
											<tr >
												<td class="teedit">updateTime</td>
												<td class="teedit">修改时间</td>
												<td  >
													<select  class="form-control" style="width: 100%;height: 100%;" >
														<option value="String">String</option>
														<option value="Date"  selected = "selected">Date</option>
														<option value="Integer">Integer</option>
														<option value="Double">Double</option>
													</select> </td>
												<td  ><select  class="form-control" style="width: 100%;height: 100%;" >
													<option value="0">是</option>
													<option value="1" selected="selected">否</option>

												</select> </td>
												<td ><select  class="form-control" style="width: 100%;height: 100%;" >
													<option value="0">是</option>
													<option value="1" selected="selected">否</option>
												</select></td>
												<td >　
													<select  name ="selectpicker" class="selectpicker"  data-live-search="true"      multiple >
														<option value="0">必选</option>
														<option value="1">邮箱</option>
														<option value="2">数字</option>
														<option value="2">编号</option>
													</select>
												</td>
												<td>
													<a class="btn btn-success btn-xs" href="#" onclick="up()"><i class="fa fa-edit"></i>上移</a>
													<a class="btn btn-success btn-xs" href="#" onclick="down()"><i class="fa fa-edit"></i>下移</a>
													<a class="btn btn-danger btn-xs" href="#" onclick="remove()"><i class="fa fa-remove"></i>删除</a>
												</td>
											</tr>
											</tbody>
										</table>

									</div>
								</div>
							</div>
						</div>
					</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

<script src="../../js/jquery.min.js?v=2.1.4"></script>
<script src="../../js/bootstrap.min.js?v=3.3.6"></script>
<script src="../../js/content.min.js?v=1.0.0"></script>
<script src="../../js/jquery-ui-1.10.4.min.js"></script>
<script src="../../js/plugins/beautifyhtml/beautifyhtml.js"></script>
<script src="../../ajax/libs/bootstrap-table/bootstrap-table.min.js"></script>
<script src="../../ajax/libs/bootstrap-table/extensions/editable/bootstrap-table-editable.js"></script>
<script src="../../ajax/libs/layer/layer.min.js" ></script>
<script src="../../js/common.js" ></script>
<script src="../../js/yunnuo-ui.js" ></script>
<script src="../../js/plugins/suggest/bootstrap-suggest.min.js" ></script>
<script src="../../js/plugins/jeditable/jquery.jeditable.js" ></script>
<script src="../../js/plugins/dataTables/jquery.dataTables.js" ></script>
<script src="../../js/plugins/dataTables/dataTables.bootstrap.js" ></script>
<script src="../../js/bootstrap-select.min.js" ></script>
<script src="../../js/dataTables.rowReorder.min.js" ></script>

<script>
	$(function () {

		initdemoCode();
		function initdemoCode() {
			$("#demoCode").bsSuggest('init', {
				url: "../systool/formbuilder/jsonlist",
				effectiveFields: ["id","demoName"],
				searchFields: [ "demoName"],
				effectiveFieldsAlias:{demoName: "模板名称",id:"模板id"},
				idField: "id",
				keyField: "demoName"
			} );
		}
	});

	/*选择菜单树*/
	function selectMenuTree() {
		var menuId = $("#treeId").val();
		if(menuId > 0)
		{
			var url =   "../../system/menu/selectMenuTree/" + menuId;
			layer_show("选择菜单", url, '380', '380');
		}
		else
		{
			var url =   "../../system/menu/selectMenuTree/1";
			layer_show("选择菜单", url, '380', '380');
		}
	}
	$(document).ready(function() {
		addclick();
		onloadselectcheck();
	});
	function onloadselectcheck(){

			$("select[name='selectpicker']").selectpicker({
				'selectedText': 'cat',
				noneSelectedText:'无',
				style: 'eleclass'
			});
	}
  function addclick(){
	  $(".dataTables-example").dataTable();
	  var oTable = $("#editable").dataTable();
	  oTable.$(".teedit").editable("localhost", {
		  "callback": function(sValue, y) {
			  var aPos = oTable.fnGetPosition(this);
			  oTable.fnUpdate(sValue, aPos[0], aPos[1])
		  },
		  "submitdata": function(value, settings) {
			  return {
				  "row_id": this.parentNode.getAttribute("id"),
				  "column": oTable.fnGetPosition(this)[2]
			  }
		  },
		  "width": "90%",
		  "height": "100%"
	  })
  }
	function fnClickAddRow() {
		$("#editable").DataTable().row.add([ 	' <td class="teedit"> id</td>',
				'<td >注释</td>',
				'<td  > <select  class="form-control" style="width: 100%;height: 100%;" > <option value="String">String</option> <option value="Date">Date</option> <option value="Integer">Integer</option> <option value="Double">Double</option> </select> </td>',
				'<td  ><select  class="form-control" style="width: 100%;height: 100%;" > <option value="0">是</option> <option value="1" selected="selected">否</option> </select> </td>',
				'<td ><select  class="form-control" style="width: 100%;height: 100%;" > <option value="0">是</option> <option value="1" selected="selected">否</option> </select></td> ',
				'<td  >	<select   name ="selectpicker" class="selectpicker"   data-live-search="true"      multiple > <option value="0">必选</option> <option value="1">邮箱</option> <option value="2">数字</option> <option value="2">编号</option> </select> </td>',
				'<td>ddd</td>'
		] ).draw();
        $("td").addClass('teedit');
		$("table tr  td select").each(
				function (){
					$(this).parent().removeClass('teedit');
				}
		);
		$("table tr  td div").each(
				function (){
					$(this).parent().removeClass('teedit');
				}
		);
		addclick();
		onloadselectcheck();
	};

	$(document).ready(function() {
		var table = $('#editable').DataTable( {
			rowReorder: true
		} );
		table.on( 'row-reorder', function ( e, diff, edit ) {
			var result = 'Reorder started on row: '+edit.triggerRow.data()[1]+'<br>';

			for ( var i=0, ien=diff.length ; i<ien ; i++ ) {
				var rowData = table.row( diff[i].node ).data();

				result += rowData[1]+' updated to be in position '+
						diff[i].newData+' (was '+diff[i].oldData+')<br>';
			}

			$('#result').html( 'Event result:<br>'+result );
		} );
	});

</script>

</body>


</html>
